<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 顶部区域 -->
      <el-form ref="form" :model="form" label-width="80px">
          <!-- 标签 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="标签名称">
                <el-input v-model="form.tags" placeholder="请输入"></el-input>
              </el-form-item>
            </div>
          </el-col>
            <!-- 城市 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="城市">
                  <el-select v-model="form.province" placeholder="请选择" @change="getArea" style="width:100%;">
                    <el-option
                      v-for="item in cityOptions"
                      :key="item"
                      :label="item"
                      :value="item"
                      >
                    </el-option>
                  </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 区域 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="地区">
                  <el-select v-model="form.city" placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in areaOptions"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="企业简称">
                <el-input v-model="form.shortName"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <!-- 状态 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="状态">
                  <el-select v-model="form.state" placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 清除 & 搜索 -->
          <el-col :span="6" :offset="1">
            <div class="grid-content bg-purple-light">
               <el-button @click="clearForm" size="small">清除</el-button>
                <el-button type="primary" @click="searchCompany" size="small">搜索</el-button>
            </div>
          </el-col>
          <!-- 新增 -->
          <el-col :span="11" >
            <div class="grid-content bg-purple-light" style="text-align:right;">
              <el-button type="success" icon="el-icon-edit" size="small" @click="toAdd">新增用户</el-button>
            </div>
          </el-col>
      </el-form>
     <!-- 提示文案 -->
      <el-alert
        :title="'共 ' + total + ' 条记录'"
        type="info"
        :closable="false"
        style="margin-bottom:20px"
        show-icon>
      </el-alert>
      <!-- 表格渲染数据 -->
      <el-table
       :header-cell-style="tableHeaderStyle"
      :data="companyTableData"
      style="width: 100%">
        <!-- 序号 -->
        <el-table-column
          prop="id"
          label="序号">
        </el-table-column>
        <!-- 企业编号 -->
        <el-table-column
          prop="number"
          label="企业编号">
        </el-table-column>
        <!-- 企业简称 -->
        <el-table-column
          prop="shortName"
          label="企业简称">
        </el-table-column>
        <!-- 标签 -->
        <el-table-column
          prop="tags"
          label="标签">
        </el-table-column>
        <!-- 创建者 -->
        <el-table-column
          prop="creatorID"
          label="创建者">
        </el-table-column>
        <!-- 创建日期 -->
        <el-table-column
          prop="addDate"
          label="创建日期"
          width="160">
          <template slot-scope="{row}">
            {{row.addDate | formatTime}}
          </template>
        </el-table-column>
        <!-- 备注 -->
        <el-table-column
          prop="remarks"
          label="备注">
        </el-table-column>
        <!-- 状态 -->
        <el-table-column
          label="状态">
          <template slot-scope="{row}">
            {{row.state | matchStatus}}
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="{row}">
            <el-button @click="edit(row.id)" type="primary" icon="el-icon-edit" circle plain></el-button>
            <el-button @click="changeState(row.id,row.state)" :type="row.state === 1 ? 'warning' : 'success'" :icon="row.state === 1 ? 'el-icon-close' : 'el-icon-check'" circle plain></el-button>
            <el-button @click="del(row.id)" type="danger" icon="el-icon-delete" circle plain></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="text-align:right;margin-top:20px"
        background
        :current-page="companyParams.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="companyParams.pagesize"
        layout="  prev, pager, next,sizes, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <companys-add
      ref="companysForm"
      :formBase="formBase"
      :titleInfo="titleInfo"
      @haveGetEditData="formBase = $event"
      @newDataes="newDataes"
      @handleCloseModal="handleCloseModal"
    />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { status } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import { list as companyList, disabled as toChangeState, remove as delCompany } from '@/api/hmmm/companys'
import CompanysAdd from '../components/companys-add.vue'
export default {
  name: 'company',
  components: { CompanysAdd },
  data () {
    return {
      form: {
        tags: '', // 标签名
        province: '', // 城市选择选项选中的值
        city: '', // 地区选择选项选中的值
        shortName: '', // 企业简称
        state: '' // 状态选择选项选中的值
      }, // 表单数据
      cityOptions: [], // 城市选择选项
      areaOptions: [], // 地区选择选项
      statusOptions: [], // 状态选择选项
      total: 0, // 一共多少条数据
      companyTableData: [], // 表格数据
      companyParams: { // 请求列表所需数据
        page: 1,
        pagesize: 10
      },
      // 弹框头部提示信息
      titleInfo: {
        text: '创建',
        pageTitle: '用户'
      },
      formBase: {} // add表单数据
    }
  },

  created () {
    this.getCompanyList()
    this.cityOptions = provinces()
    this.statusOptions = status
    // this.getArea()
  },
  filters: {
    // 状态转换
    matchStatus (val) {
      // val 是一个字符串
      const value = status.find(item => {
        return item.value - 0 === (val - 0)
      })
      return value.label
    },
    // 时间格式化
    formatTime (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods: {
    // 表头高亮
    tableHeaderStyle ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#F5F7FA;'
      } else {
        return ''
      }
    },
    // 根据城市获取地区
    getArea (val) {
      this.areaOptions = citys(val)
      this.form.city = this.areaOptions[0]
    },
    // 获取企业数据
    async getCompanyList () {
      const res = await companyList(this.companyParams)
      // console.log(res)
      this.companyTableData = res.data.items
      this.total = res.data.counts
    },
    handleSizeChange (val) {
      this.companyParams.pagesize = val
      this.getCompanyList()
    },
    handleCurrentChange (val) {
      this.companyParams.page = val
      this.getCompanyList()
    },
    // 清除功能
    clearForm () {
      this.form = {
        tags: '', // 标签名
        province: '', // 城市选择选项选中的值
        city: '', // 地区选择选项选中的值
        shortName: '', // 企业简称
        state: '' // 状态选择选项选中的值
      }
      this.companyParams = {
        page: 1,
        pagesize: 10
      }
      console.log(1)
      this.getCompanyList()
    },
    // 查找功能
    searchCompany () {
      const arr = Object.keys(this.form)
      arr.forEach(item => {
        if (this.form[item] !== '') {
          // console.log(item)
          // console.log(this.form[item])
          this.companyParams[item] = this.form[item]
        }
      })
      // console.log(this.companyParams)
      this.getCompanyList()
    },
    // 切换状态
    async changeState (id, state) {
      if (state === 1) {
        state = 0
      } else {
        state = 1
      }
      console.log(id, state)
      const value = status.find(item => {
        return item.value - 0 === (state - 0)
      })
      console.log(value.label)
      this.$confirm(`已成功${value.label}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await toChangeState({
          id: id,
          state: state
        })
        // console.log(res)
        this.$message({
          type: 'success',
          message: `已成功${value.label}`
        })
        this.getCompanyList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 删除
    del (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delCompany({
          id: id
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getCompanyList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击新增用户
    toAdd () {
      this.titleInfo.text = '新增'
      this.$refs.companysForm.dialogFormV()
    },
    // 点击编辑
    edit (id) {
      // console.log(id)
      this.formBase.id = id
      this.titleInfo.text = '编辑'
      console.log(this.formBase)
      this.$refs.companysForm.dialogFormV()
    },
    // 成功新增或者编辑之后的回调
    newDataes () {
      this.getCompanyList()
    },
    // 弹层关闭
    handleCloseModal () {
      this.formBase = {}
    }
  }
}
</script>

<style scoped lang='less'>
  // card 的margin
  .box-card {
    margin: 20px;
    font-size: 14px;
  }
  // .inputName{
  //   width: 190px;
  //   height: 32px;
  // }
  /deep/.el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  /deep/.el-table th > .cell {
    text-align: center;
  }

  /deep/.el-table .cell {
    text-align: center;
  }
</style>
